<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
    <h2>消息详情</h2>

    <!-- 显示消息的内容 -->
    <div>
        <h4>当前消息ID: <span id="msgId"></span></h4>
        <p><strong>名称:</strong> <span id="msgName"></span></p>
        <p><strong>内容:</strong> <span id="msgContent"></span></p>
    </div>

    <!-- 上传文件 -->
    <div class="mt-4">
        <h4>上传文件</h4>
        <form id="uploadForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for="fileInput">选择文件</label>
                <input type="file" class="form-control-file" id="fileInput" name="file" required>
            </div>
            <button type="submit" class="btn btn-primary">上传</button>
        </form>
        <div id="uploadStatus" class="mt-2"></div>
    </div>

    <!-- 用户输入prompt的对话框 -->
    <div class="mt-4">
        <h4>输入Prompt</h4>
        <div class="form-group">
            <label for="promptInput">请输入提示词：</label>
            <textarea class="form-control" id="promptInput" rows="3" required></textarea>
        </div>
        <button class="btn btn-success" id="submitPromptBtn">提交</button>
        <div id="promptResponse" class="mt-2"></div>
    </div>

    <a href="/msgList" class="btn btn-secondary mt-4">返回列表</a>
</div>

<script type="text/javascript">
    // 获取 URL 中的 msgId
    var urlPath = window.location.pathname;
    var msgId = urlPath.split("/").pop();  // 获取路径最后的数字部分作为 ID

    // 如果 msgId 存在，使用该 ID 来请求数据
    if (msgId) {
        // 发起请求从后端获取该消息的详情
        fetch(`/getOne/${msgId}`)
            .then(response => {
                if (response.ok) {
                    return response.json();  // 如果请求成功，解析返回的 JSON 数据
                } else {
                    throw new Error('无法获取消息详情');
                }
            })
            .then(data => {
                // 将返回的消息详情数据展示在页面上
                document.getElementById("msgId").textContent = data.id;
                document.getElementById("msgName").textContent = data.name;
                // 判断 data.msg 是否为空，显示相应的消息
                if (data.msg && data.msg.trim() !== "") {
                    document.getElementById("msgContent").textContent = "文件上传成功";
                } else {
                    document.getElementById("msgContent").textContent = "文件上传失败";
                }
            })
            .catch(error => {
                alert(error.message);
            });
    } else {
        document.getElementById("msgId").textContent = "未获取到消息ID";
    }

    // 处理上传文件
    document.getElementById("uploadForm").addEventListener("submit", function(event) {
        event.preventDefault();  // 阻止表单默认提交

        // 获取文件和当前的消息ID
        var fileInput = document.getElementById("fileInput");
        var file = fileInput.files[0];

        if (!file) {
            alert("请先选择文件");
            return;
        }

        // 创建一个 FormData 对象
        var formData = new FormData();
        formData.append("file", file);
        formData.append("id", msgId);  // 将当前消息的 ID 添加到表单数据中

        // 发送 AJAX 请求到后端
        fetch('/upload', {
            method: 'POST',
            body: formData
        })
            .then(response => {
                if (response.ok) {
                    return response.text();  // 如果上传成功，返回上传结果
                } else {
                    throw new Error('文件上传失败');
                }
            })
            .then(data => {
                document.getElementById("uploadStatus").textContent = "文件上传成功: " + data;
            })
            .catch(error => {
                document.getElementById("uploadStatus").textContent = "上传失败: " + error.message;
            });
    });

    // 处理提交 Prompt
    document.getElementById("submitPromptBtn").addEventListener("click", function() {
        var promptText = document.getElementById("promptInput").value;

        if (!promptText) {
            alert("请输入提示词");
            return;
        }

        // 创建请求参数
        var params = new URLSearchParams();
        params.append('id', msgId);
        params.append('prompt', promptText);

        // 发送 POST 请求
        fetch('/prompt', {
            method: 'POST',
            body: params
        })
            .then(response => {
                if (response.ok) {
                    return response.text();  // 返回的响应文本
                } else {
                    throw new Error('提示词提交失败');
                }
            })
            .then(data => {
                document.getElementById("promptResponse").textContent = "返回结果: " + data;
            })
            .catch(error => {
                document.getElementById("promptResponse").textContent = "提交失败: " + error.message;
            });
    });
</script>
</body>
</html>
